.dual-bar-chart {
  min-width: 390px;
  max-width: 600px;
  box-sizing: border-box;
  // background: #0a0e13;
  font-family: 'SourceHanSansSC', 'PingFangSC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  .chart-area{
    width: 100%;
    height: 100%;
  }
  &__legend {
    z-index: 10;
  }

  &__legend-item {
    cursor: pointer;
    transition: opacity 0.2s ease;

    &:hover {
      opacity: 0.8;
    }
  }

  &__legend-dot {
    flex-shrink: 0;
  }

  &__group {
    box-sizing: border-box;
  }

  &__background-bar {
    box-sizing: border-box;
    pointer-events: none;
  }

  &__normal-bar,
  &__alert-bar {
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      transform: scaleY(1.05);
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }
  }

  &__value-label {
    box-sizing: border-box;
    pointer-events: none;
    transition: all 0.3s ease;
  }

  &__category-label {
    box-sizing: border-box;
    pointer-events: none;
    transition: all 0.3s ease;
  }

  // 动画效果
  &__group {
    animation: fadeInUp 0.6s ease-out;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 10px;

    &__legend {
      position: relative;
      top: auto;
      right: auto;
      margin-bottom: 15px;
      justify-content: center;
    }
  }
}
